<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<image class="logo" src="/static/75.png" mode="" :style="`padding-top: ${$Height() - 30}px;`"></image>
		<view class="swiper">
			<uni-swiper-dot :info="info" :current="current" mode="round" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change" autoplay circular>
					<swiper-item v-for="(item, index) in info" :key="index">
						<image class="swiper-item" :src="item.photo" mode=""></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="swiper_btn"></view>
		</view>
		<view class="con">
			<view class="box">
				<view class="box_title" @click="to_city">
					<view class="box_title_left">吉林</view>
					<view class="box_title_box">{{ cityStore.name ? cityStore.name : '当前位置/区域' }}</view>
					<image class="box_title_right" src="/static/1.png" mode=""></image>
				</view>
				<input
					class="box_inp"
					type="text"
					placeholder="请输入景点/位置/区域搜索"
					confirm-type="search"
					v-model="title"
					@confirm="to_condo_list" />
				<view class="box_nr">
					<view class="box_nr_top" @click="onShowDatePicker">
						<view class="box_nr_top_nr1">{{ cityStore.month_day_1 }}</view>
						<view class="box_nr_top_nr2">{{ cityStore.dayDiff }}晚</view>
						<view class="box_nr_top_nr1">{{ cityStore.month_day_2 }}</view>
						<view class="box_nr_top_nr3" @click.stop="open">
							{{ sift_id_1_x ? sift_id_1_x + '人' : '人数' }}·
							{{ sift_id_2_x ? sift_id_2_x + '床' : '床位' }}
						</view>
					</view>
					<view class="box_nr_btn" @click="onShowDatePicker">
						<view class="box_nr_btn_nr1">{{ cityStore.weekday_1 }}</view>
						<view class="box_nr_btn_nr2">···········</view>
						<view class="box_nr_btn_nr1">{{ cityStore.weekday_2 }}</view>
						<view class="box_nr_btn_nr3"></view>
					</view>
				</view>
				<view class="box_btn" @click="to_condo_list">搜索民宿</view>
			</view>

			<view class="nav">
				<view class="nav_nr" @click="to_condo_list">
					<image class="nav_nr_img" src="/static/2.png" mode=""></image>
					<view class="nav_nr_title">整租一居</view>
				</view>
				<view class="nav_nr" @click="to_condo_list">
					<image class="nav_nr_img" src="/static/3.png" mode=""></image>
					<view class="nav_nr_title">今晚特价</view>
				</view>
				<view class="nav_nr" @click="to_condo_list">
					<image class="nav_nr_img" src="/static/4.png" mode=""></image>
					<view class="nav_nr_title">连住特惠</view>
				</view>
			</view>

			<view class="list">
				<view class="list_nr" v-for="(item, index) in list" :key="index" @click="to_condo_detail(item.id)">
					<image class="list_nr_img" :src="item.photo" mode=""></image>
					<view class="list_nr_pfzw">
						<image class="list_nr_pfzw_img" src="/static/5.png" mode=""></image>
						<view class="list_nr_pfzw_text">{{ item.xingji }}</view>
					</view>
					<view class="list_nr_box">
						<view class="list_nr_title">{{ item.title }}</view>
						<view class="list_nr_text">
							{{ item.shi }}室{{ item.ting }}厅·{{ item.shuliang }}床·宜住{{ item.renshu }}人
						</view>
						<view class="list_nr_num">
							<span class="span1">¥</span>
							<span class="span2">{{ item.jwprice }}</span>
							<span class="span3">/晚</span>
							<span class="span4">¥{{ item.price }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup
			ref="sift_popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
			:mask-click="false"
			@change="popup_change">
			<view class="sift_popup_box">
				<image class="sift_popup_box_zw" src="/static/50.png" mode="" @click="close"></image>
				<view class="sift_popup_box_top">人数/床数选择</view>
				<view class="sift_popup_box_title">宜居人数</view>
				<view class="sift_popup_box_list">
					<view
						class="sift_popup_box_list_nr"
						:class="sift_id_1_x == item ? 'sift_popup_xz' : ''"
						v-for="(item, index) in 10"
						:key="index"
						@click="sift_id_1_x = item">
						{{ item }}人{{ item == 10 ? '+' : '' }}
					</view>
				</view>
				<view class="sift_popup_box_title">床铺数量</view>
				<view class="sift_popup_box_list">
					<view
						class="sift_popup_box_list_nr"
						:class="sift_id_2_x == item ? 'sift_popup_xz' : ''"
						v-for="(item, index) in 10"
						:key="index"
						@click="sift_id_2_x = item">
						{{ item }}床{{ item == 10 ? '+' : '' }}
					</view>
				</view>
			</view>
			<view class="sift_popup_box_btn">
				<view class="sift_popup_box_btn_nr btn1" @click="sift_sub(0)">清空</view>
				<view class="sift_popup_box_btn_nr btn2" @click="sift_sub(1)">确定</view>
			</view>
		</uni-popup>

		<uni-popup
			ref="Picker_popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
			:mask-click="false"
			@change="popup_change">
			<view class="picker_popup_box">
				<view class="picker_popup_box_top">
					<image class="picker_popup_box_top_zw" src="/static/50.png" mode="" @click="ed(false)"></image>
					<view class="picker_popup_box_top_title">选择入住离开日期</view>
				</view>
				<view class="picker_popup_box_nr">
					<date-picker
						:show="showPicker"
						type="range"
						:value="cityStore.formatted"
						:show-tips="true"
						:begin-text="'入住'"
						:end-text="'离店'"
						:show-seconds="true"
						@confirm="ed"
						@cancel="ed" />
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="introduction" type="center" border-radius="10px " background-color="#fff">
			<view class="introduction_box">
				<view class="introduction_box_top">凇江宿集</view>
				<view class="introduction_box_text">
					简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位简介占位
				</view>
			</view>
		</uni-popup>

		<TabBar :type="1" :index="1"></TabBar>
	</view>
</template>

<script setup>
	import DatePicker from '@/components/datepicker/datepicker.vue'
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let title = ref('')
	let listtype = ref(true)
	let list = ref([])
	let dotsStyles = {
		width: '5',
		bottom: '60',
		backgroundColor: '#FFFFFF',
		border: '1px #FFFFFF solid',
		color: '#FFFFFF',
		selectedBackgroundColor: '#FFFFFF',
		selectedBorder: '1px #FFFFFF solid'
	}
	let info = ref([])
	let current = ref(0)
	let show = ref(false)
	let sift_popup = ref(null)
	let sift_id_1 = ref(null)
	let sift_id_2 = ref(null)
	let sift_id_1_x = ref('')
	let sift_id_2_x = ref('')
	// 响应式变量定义
	const showPicker = ref(false)
	let Picker_popup = ref(null)
	let introduction = ref(null)

	// 显示日期选择器
	const onShowDatePicker = (type) => {
		console.log('cityStore', cityStore)
		showPicker.value = true
		Picker_popup.value.open()
	}

	// 处理选择结果
	const ed = (result) => {
		Picker_popup.value.close()
		showPicker.value = false
		console.log('result', result)
		// if (result) {
		// }
	}

	const change = (e) => {
		current.value = e.detail.current
	}

	const open = () => {
		sift_popup.value.open()
		sift_id_1_x.value = sift_id_1.value
		sift_id_2_x.value = sift_id_2.value
	}

	const close = () => {
		sift_popup.value.close()
		introduction.value.close()
	}
	const sift_sub = (val) => {
		if (val == 0) {
			sift_id_1_x.value = ''
			sift_id_2_x.value = ''
			sift_id_1.value = ''
			sift_id_2.value = ''
		} else {
			sift_id_1.value = sift_id_1_x.value
			sift_id_2.value = sift_id_2_x.value
		}
		sift_popup.value.close()
	}
	const popup_change = (e) => {
		console.log(e.show)
		show.value = e.show
	}

	const indexlist = async () => {
		await http.noAuthpost('/srapi/home/index').then((res) => {
			console.log('返回值', res)
			info.value = res.lunbo
			list.value = res.data
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)

		uni.showLoading({})
		await cityStore.init()
		await indexlist()
		await introduction.value.open()
		uni.hideLoading()
	})

	const to_condo_list = () => {
		uni.navigateTo({
			url:
				'/pages_A/condo_list/condo_list?sift_id_1_x=' +
				sift_id_1_x.value +
				'&sift_id_2_x=' +
				sift_id_2_x.value +
				'&title=' +
				title.value
		})
	}
	const to_condo_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/condo_detail/condo_detail?id=' + id
		})
	}
	const to_city = (id) => {
		uni.navigateTo({
			url: '/pages_A/city/city'
		})
	}
</script>

<style lang="less" scoped>
	.logo {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 150rpx;
		height: 50rpx;
	}
	.swiper {
		width: 750rpx;
		height: 750rpx;
		position: relative;
		z-index: 3;
		.swiper-box {
			width: 750rpx;
			height: 750rpx;
			.swiper-item {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.swiper_btn {
			width: 750rpx;
			height: 150rpx;
			position: absolute;
			left: 0;
			bottom: -50rpx;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, #f4f5f9 30%);
		}
	}

	.con {
		padding: 30rpx;
		margin-top: -130rpx;
		position: relative;
		z-index: 5;
	}

	.box {
		border-radius: 24rpx;
		padding: 30rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 5%, #fff 20%);
		margin-bottom: 30rpx;
		.box_title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 30rpx;
			.box_title_left {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
				margin-right: 30rpx;
			}
			.box_title_box {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
				padding: 10rpx 10rpx 10rpx 30rpx;
				border-left: 1px solid #dedede;
			}
			.box_title_right {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.box_inp {
			background: #f0f0f0;
			border-radius: 12rpx;
			padding: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.box_nr {
			margin-bottom: 50rpx;
			.box_nr_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> view {
					flex: 1;
					text-align: center;
				}
				.box_nr_top_nr1 {
					font-size: 32rpx;
					font-weight: 700;
					color: #000000;
				}
				.box_nr_top_nr2 {
					font-size: 28rpx;
					font-weight: 700;
					color: #2664ee;
				}
				.box_nr_top_nr3 {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
			}
			.box_nr_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> view {
					flex: 1;
					text-align: center;
				}
				.box_nr_btn_nr1 {
					position: relative;
					top: 10rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #787878;
				}
				.box_nr_btn_nr2 {
					font-size: 28rpx;
					font-weight: 500;
					color: #2664ee;
					letter-spacing: -1.6rpx;
				}
				.box_nr_btn_nr3 {
					width: 89rpx;
				}
			}
		}
		.box_btn {
			height: 84rpx;
			background: linear-gradient(#4b83ff 0%, #2664ee 100%);
			border-radius: 12rpx;

			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 84rpx;
		}
	}

	.nav {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.nav_nr {
			margin: 0 25rpx;
			.nav_nr_img {
				width: 135rpx;
				height: 90rpx;
				margin-bottom: 15rpx;
			}
			.nav_nr_title {
				width: 135rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #000000;
			}
		}
	}
	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		.list_nr {
			width: 335rpx;
			position: relative;
			background: #ffffff;
			border-radius: 12rpx;
			.list_nr_img {
				width: 335rpx;
				height: 335rpx;
			}
			.list_nr_pfzw {
				width: 106rpx;
				position: absolute;
				right: 10rpx;
				top: 280rpx;
				.list_nr_pfzw_img {
					width: 106rpx;
					height: 34rpx;
					border-radius: 17rpx;
					position: absolute;
					z-index: 1;
				}
				.list_nr_pfzw_text {
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #ffffff;
					position: relative;
					z-index: 2;
					padding-left: 20rpx;
				}
			}
			.list_nr_box {
				padding: 20rpx;
				.list_nr_title {
					white-space: nowrap; /* 禁止换行 */
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 显示省略号 */
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.list_nr_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					margin-bottom: 15rpx;
				}
				.list_nr_num {
					.span1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #e93424;
					}
					.span2 {
						font-size: 36rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span3 {
						font-size: 20rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span4 {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #787878;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	.sift_popup_box {
		position: relative;
		padding: 30rpx;
		.sift_popup_box_zw {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 0;
			top: 0;
			padding: 30rpx;
		}
		.sift_popup_box_top {
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
			margin-bottom: 40rpx;
		}
		.sift_popup_box_title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 30rpx;
		}
		.sift_popup_box_list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 12px; /* 间距相等 */
			margin-bottom: 60rpx;
			.sift_popup_box_list_nr {
				width: 158rpx;
				height: 64rpx;
				background: #f4f5f9;
				border-radius: 32rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #000000;
				line-height: 64rpx;
			}
			.sift_popup_xz {
				background: #2266f9;
				color: #ffffff;
			}
		}
	}
	.sift_popup_box_btn {
		padding: 30rpx;
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		background: #ffffff;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.sift_popup_box_btn_nr {
			width: 335rpx;
			height: 78rpx;
			border-radius: 41rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			line-height: 80rpx;
		}
		.btn1 {
			background: #ffffff;
			border: 2rpx solid #787878;
			color: #787878;
		}
		.btn2 {
			background: #4b83fe;
			color: #fefefe;
			border: 2rpx solid #4b83fe;
		}
	}

	.introduction_box {
		width: 570rpx;
		padding: 30rpx;
		.introduction_box_top {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
			margin-bottom: 30rpx;
		}
		.introduction_box_text {
			font-size: 28rpx;
			font-weight: 500;
			text-align: left;
			color: #787878;
		}
	}

	//
</style>
